<template>
	<view class="">
		<view class="p12">

			<view class="p12 bg-white brs10">

				<view class="u-flex bm">
					<view class="fz14 f70">
						选择诊所
					</view>

					<view @click="areaClick" class="brs5 p10 u-f-jsb u-flex u-f1">

						<span class="u-line-1" style="max-width: 600rpx;">{{search.area|| '请选择地区'}}</span>
						<u-icon name="arrow-down" color="#D9D9D9"></u-icon>
					</view>
				</view>
				<view class="bm">

					<view @click="popupList=storeList,popupFiled='shop_id',pupopShow=true"
						class="u-f1 brs5 p15 u-f-jsb u-flex pl0">
						<span v-if="form.shop_id">{{form.shop_id_name}}</span>
						<span class="c8" v-else>请选择诊所</span>
						<u-icon name="arrow-down" color="#D9D9D9"></u-icon>
					</view>
				</view>


				<view class="u-flex bm">
					<view class="fz14 w70">
						选择服务
					</view>
					<view class="u-f1">
						<view @click="popupList=serveList,popupFiled='serve_id',pupopShow=true"
							class="u-f1 brs5 p15 u-f-jsb u-flex pl0">
							<span v-if="form.serve_id">{{form.serve_id_name}}</span>
							<span class="c8" v-else>请选择服务</span>
							<u-icon name="arrow-down" color="#D9D9D9"></u-icon>
						</view>
					</view>
				</view>
				<view class="u-flex bm">
					<view class="fz14 w70">
						卡 号
					</view>
					<view class="brs5 p10 u-f1 pl0">
						<input placeholder="请输入卡号" v-model="form.code" type="text" style="padding-left: 0;" />
					</view>
				</view>
				<view class="u-flex">
					<view class="fz14 w70">
						卡 密
					</view>
					<view class="brs5 p10 pl0">
						<input placeholder="请输入卡密" v-model="form.password" type="text" style="padding-left: 0;" />
					</view>
				</view>
				<!-- <view class="fz14 pb10 mt15">
					验证码
				</view> -->

				<!-- <view class="u-flex">
				<view style="background: rgba(25,41,28,0.05);" class="brs5 p10 u-f1">
					<input placeholder="请输入验证码" v-model="form.title" type="text" style="padding: 0;" />
				</view>
				<view style="width: 200rpx;text-align: center;color: #1a2a7e;">获取验证码</view>
				</view> -->

			</view>
			<view class="mt15 u-font-bold">个人信息</view>
			<view class="p12 bg-white brs10 mt10 bg-shaw">
				<view class="u-flex bm">
					<view class="fz14 w70">
						称 呼
					</view>
					<view class="brs5 p10 u-f1 pl0">
						<input placeholder="请输入称呼" style="padding-left: 0;" v-model="form.name" type="text" />
					</view>

					<view class="brs5 p10">
						<u-radio-group v-model="form.sex">
							<u-radio name="男士">
								男士
							</u-radio>
							<u-radio name="女士">
								女士
							</u-radio>
						</u-radio-group>
					</view>
				</view>


				<!-- <view class="fz14 pb10 mt15">
					性别
				</view> -->

				<view class="u-flex bm">
					<view class="fz14  w70">
						年 龄
					</view>
					<view class="brs5 p10 u-f1 pl0">
						<input style="padding-left: 0;" placeholder="请输入年龄" v-model="form.age" type="text" />
					</view>
				</view>
				<view class="u-flex">
					<view class="fz14 w70">
						手机号
					</view>
					<view class="brs5 p10 u-f1 pl0">
						<input style="padding-left: 0;" placeholder="请输入手机号" v-model="form.phone" type="text" />
					</view>
				</view>
			</view>
			<view class="lh24 p12 c6 fz13">
				项目内容：</br>1、预约挂号费x1</br>2、牙科健康档案x1</br>3、刷牙指导x1</br>4、牙科全景片/CT片x1</br>5、专家检查x1</br>6、口腔健康指导x1
			</view>
		</view>
		<view class="fixed-bottom module-btn" style="position: inherit;">
			<button type="primary" @click="save" class="btn mt15">确认预约</button>
		</view>
		<u-picker mode="selector" range-key="name" @confirm="popupConfirm" v-model="pupopShow"
			:range="popupList"></u-picker>

		<wanl-address ref='wanlAddress' @resetAddress="resetAddress"
			@selectAddress="successSelectAddress"></wanl-address>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupList: [],
				popupFiled: '',
				search: {},
				pupopShow: false,
				defaultIndex: [0, 0, 0],
				show: false,
				navTitle: "添加地址",
				serveList: [],
				storeList: [],
				form: {
					shop_id: '',
					shop_id_name: ''
				}
			}
		},
		onLoad(options) {
			this.initData()
			this.getList()
		},
		onShow() {

			if (uni.getStorageSync('storeInfo')) {
				let item = JSON.parse(uni.getStorageSync('storeInfo'))

				this.form.shop_id = item.id
				this.form.shop_id_name = item.shopname
				uni.setStorageSync('storeInfo', '')
			}
		},
		computed: {},
		methods: {
			resetAddress() {
				this.search.area = ``
				this.search.province_id = '';
				this.search.city_id = '';
				this.search.area_id = '';
				this.getList()
			},
			areaClick() {
				this.$refs.wanlAddress.show()
			},
			successSelectAddress(address) {
				console.log(address)
				// ${address.province}-${address.city}-
				this.search.area = `${address.province}-${address.city}-${address.district}`
				this.search.province_id = address.ids[0];
				this.search.city_id = address.ids[1];
				this.search.area_id = address.ids[2];
				this.getList()

			},
			popupConfirm(e) {
				let idx = e[0]
				this.form[this.popupFiled] = this.popupList[idx].id
				this.form[this.popupFiled + '_name'] = this.popupList[idx].name
				console.log(e, 122)
			},
			initData() {
				uni.request({
					url: '/wanlshop/index/hospitalServe',
					data: {},
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {
							this.serveList = res.res.data
						}
					}
				});



			},

			getList() {
				uni.request({
					url: '/wanlshop/index/shop',
					data: {
						page: 1,
						...this.search
					},
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {
							res.res.data.data.some(item => {
								item.name = item.shopname
							})

							this.storeList = res.res.data.data
						}
					}
				});

			},
			save() {

				uni.request({
					url: '/wanlshop/index/subscribe',
					data: this.form,
					method: 'POST',
					complete: res => {
						console.log(res, 1212)
						if (res.res.code === 1) {
							uni.showToast({
								title: '预约成功'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/user/appointment/list"
								})
							}, 1500)
						} else {
							uni.showToast({
								title: res.res.msg,
								icon: 'none'
							})
						}
					}
				});
			}
		},
		mounted() {

		}
	}
</script>

<style>
	.btn {
		border-radius: 16rpx;
	}
</style>